<template>
    <div class="productContainer">
        <!-- header -->
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <van-tabs v-model="active" sticky slot="title">
                <van-tab title="商品">
                    <good></good>
                </van-tab>
                <van-tab title="评论">
                    <comment></comment>
                </van-tab>
                <van-tab title="详情">
                    <detail></detail>
                </van-tab>
            </van-tabs>
            <van-icon name="ellipsis" slot="right" />
        </van-nav-bar>
        <!-- GoodsAction -->
        <div class="goodsAction">
            <ul>
                <li class="bar-info">
                    <router-link to="/">
                        <van-icon name="chat-o" />
                        <span>咨询药师</span>
                    </router-link>
                    <router-link to="/cart">
                        <van-icon name="cart-o"><span class="tags">{{tagNum}}</span></van-icon>
                        <span>清单</span>
                    </router-link>
                </li>
                <li class="to-car" @click="toCar">加入清单</li>
                <li class="buy-btn">立即提交</li>
            </ul>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import good from './good'
import comment from './comment'
import detail from './details'
export default {
    data() {
        return {
            active: 0,
            // 购物数量
            tagNum: 0
        }
    },
    methods: {
        ...mapActions(['getProInfo', 'getShopCar', 'joinShopCar']),
        onClickLeft() {
            this.$router.go(-1)
        },
        // 加入购物车
        async toCar() {
            let code = this.$route.params.code
            let num = 1
            // 加入购物列表（参数）
            await this.joinShopCar({code, num})
            // 发起购物列表请求
            this.getShopCar(this.shopCar.param)
            this.tagNum++
        }
    },
    computed: {
        ...mapState(['product', 'shopCar'])
    },
    async mounted() {
        let code = this.$route.params.code
        await this.getProInfo(code)
    },
    components: {
        good,
        comment,
        detail
    }
}
</script>

<style lang="scss">
    .productContainer {
        // header
        .van-nav-bar {
            text-align: left;
            line-height: 1!important;
            .van-icon {
                color: #111;
            }
            .van-nav-bar__left,
            .van-nav-bar__right {
                line-height: 44px;
                z-index: 99;
            }
            .van-tabs__line {
                height: 0;
            }
            .van-tab--active {
                font-weight: 700;
            }
            .van-swipe__track {
                text-align: center;
            }
            .van-nav-bar__title {
                max-width: 100%;
                margin-bottom: 0.48rem;
                .van-tabs__wrap {
                    margin: 0 auto;
                    width: 60%;
                }
            }
        }
        // footer
        .goodsAction {
            width: 100%;
            height: 0.48rem;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: inline-block;
            z-index: 101;
            background-color: #fff;
            ul {
                height: 100%;
                display: flex;
                align-items: center;
                text-align: center;
                border-top: 1px solid #eee;
                li {
                    flex: 1;
                    height: 100%;
                    font-size: 0.14em;
                    width: 100%;
                    line-height: 0.48rem;
                    color: #fff;
                    &.to-car {
                        background-color: #fba744;
                    }
                    &.buy-btn {
                        background-color: #f53b10;
                    }
                }
                li.bar-info {
                    display: flex;
                    flex: 0 0 150px;
                    a {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        flex: 1;
                        color: #999;
                        font-size: 0.12rem;
                        line-height: normal;
                        .van-icon {
                            font-size: 0.22rem;
                        }
                    }
                    .tags {
                        position: absolute;
                        font-size: 12px;
                        top: 0;
                        padding: 2px;
                        width: 12px;
                        height: 12px;
                        background: #ff6464;
                        color: #fff;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
</style>
